<template>
  <div class="header">
    <img src="@/assets/img/logo.svg" alt="">
    <ul>
      <li v-for="(item,index) in list" :class="{active:$store.state.href==item.href}" :key="index" @click="change(item.href)"><router-link :to="item.linkto">{{item.name}}</router-link></li>
    </ul>
  </div>
</template>

<script>
import store from '@/vuex/store.js'
export default {
  data () {
    return {
      list:[],
    }
  },
  store,
  methods: {
    change: function(res){
      sessionStorage.setItem('detailnum',0)
      
      if(res!=0){
        sessionStorage.setItem("processhead",0)
      }
      sessionStorage.setItem("headernum",res)
    }
  },
  mounted(){
    let arr = JSON.parse(sessionStorage.getItem('userinfo')).roles
    console.log(arr.filter(item=>item.slug=='staff')[0])
    if(arr.filter(item=>item.slug=='admin')[0]){
      this.list = [{name:'正在处理中的项目',linkto:"/process",href:0},
      {name:'待分配的项目',linkto:"/wait",href:1},
      {name:'完成的项目',linkto:"/complete",href:2},
      {name:'待付款的订单',linkto:"/paying",href:3},
      {name:'数据分析咨询',linkto:"/analysis",href:4},
      {name:'设置',linkto:"/setting",href:5}]
      sessionStorage.setItem("teamleave",2)
    }else if(arr.filter(item=>item.slug=='team_admin')[0]){
      this.list = [{name:'正在处理中的项目',linkto:"/process",href:0},
      {name:'待分配的项目',linkto:"/wait",href:1},
      {name:'完成的项目',linkto:"/complete",href:2},
      {name:'待付款的订单',linkto:"/paying",href:3},
      {name:'数据分析咨询',linkto:"/analysis",href:4}]
      sessionStorage.setItem("teamleave",1)
    }else if(arr.filter(item=>item.slug=='staff')[0]){
      this.list = [{name:'正在处理中的项目',linkto:"/process",href:0},
      {name:'完成的项目',linkto:"/complete",href:2}]
      sessionStorage.setItem("teamleave",0)
    }
  }
}
</script>

<style lang='scss' scoped>
  .header{
    position: relative;
    z-index: 3;
    width: 100%;
    min-width: 1200px;
    height: 80px;
    background:rgba(255,255,255,1);
    box-shadow:0px 4px 9px 0px rgba(0, 0, 0, 0.13);
    display: flex;
    align-items: center;
    img{
      width: 135px;
      height: 53px;
      margin-left: 40px;
    }
    ul{
      display: flex;
      margin-left: 50px;
      li{
        line-height: 80px;
        a{
          padding: 0 20px;
          text-decoration: none;
          color: rgb(57,57,57);
          width: 100%;
          height: 100%;
          display: block;
        }
      }
      li.active{
        border-bottom: 1px solid rgb(181,181,181);
      }
    }
  }
</style>
